<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>会议管理系统</title>
    <link rel="stylesheet" href="../css/main.css">
</head>
<body>
    <div class="container">
        <!-- 侧边栏 -->
        <div class="sidebar">
            <!-- 基本信息 -->
            <div class="profile">
                <div class="avatar">
                    <img src="../assets/avatar.png" alt="用户头像">
                </div>
                <div class="user-info">
                    <p class="work-id">工号：10000</p>
                    <p class="username">姓名：admin</p>
                </div>
            </div>

            <!-- 菜单 -->
            <div class="menu">
                <div class="menu-item" data-page="home">
                    <span>主页</span>
                </div>
                <div class="menu-item" data-role="admin">
                    <span>会议管理</span>
                    <div class="submenu">
                        <div class="submenu-item" data-page="add-meeting">添加会议</div>
                        <div class="submenu-item" data-page="meeting-query">会议情况查询</div>
                    </div>
                </div>
                <div class="menu-item" data-page="user-meetings">用户界面</div>
                <div class="menu-item" data-page="face-register">人脸录入</div>
            </div>
        </div>

        <!-- 主内容区域 -->
        <div class="main-content">
            <!-- 主页界面 -->
            <div id="home" class="page">
                <div class="welcome-container">
                    <h1>欢迎使用会议管理系统</h1>
                    <p>本系统提供会议管理、人脸识别签到等功能</p>
                </div>
            </div>

            <!-- 添加会议界面 -->
            <div id="add-meeting" class="page">
                <h2>添加会议</h2>
                <form id="meetingForm">
                    <div class="form-group">
                        <label for="topic">会议主题：</label>
                        <input type="text" id="topic" required>
                    </div>
                    <div class="form-group">
                        <label for="startTime">开始时间：</label>
                        <input type="datetime-local" id="startTime" required>
                    </div>
                    <div class="form-group">
                        <label for="endTime">结束时间：</label>
                        <input type="datetime-local" id="endTime" required>
                    </div>
                    <div class="form-group">
                        <label>参会人员：</label>
                        <button type="button" id="selectParticipants">选择参会人员</button>
                    </div>
                    <button type="submit">提交</button>
                </form>
            </div>

            <!-- 会议查询界面 -->
            <div id="meeting-query" class="page">
                <h2>会议情况查询</h2>
                <table id="meetingTable">
                    <thead>
                        <tr>
                            <th>会议主题</th>
                            <th>开始时间</th>
                            <th>结束时间</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>

            <!-- 用户会议界面 -->
            <div id="user-meetings" class="page">
                <h2>我的会议</h2>
                <table id="userMeetingTable">
                    <thead>
                        <tr>
                            <th>会议主题</th>
                            <th>开始时间</th>
                            <th>结束时间</th>
                            <th>状态</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>

            <!-- 人脸录入界面 -->
            <div id="face-register" class="page">
                <h2>人脸录入</h2>
                <h4>请保持所有的面部在框内，眼睛平视摄像头，点击拍照后保持不动，直到出现提示</h4>
                <div class="camera-container">
                    <video id="faceVideo" autoplay></video>
                    <button id="captureBtn">拍照</button>
                </div>
            </div>

            <!-- 签到界面 -->
            <div id="check-in" class="page">
                <h2>会议签到</h2>
                <div class="meeting-info">
                    <h3 id="meeting-title">会议主题：</h3>
                    <p id="meeting-time">会议时间：</p>
                </div>
                <div class="camera-container">
                    <video id="checkInVideo" autoplay></video>
                    <button id="checkInCaptureBtn">拍照签到</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 参会人员选择 / 人员签到详情弹窗 -->
    <div id="participantsModal" class="modal">
        <div class="modal-content">
            <h3>选择参会人员</h3>
            <div id="participantsList"></div>
            <div class="modal-buttons">
                <button id="confirmParticipants">确定</button>
                <button id="cancelParticipants">取消</button>
            </div>
        </div>
    </div>

    <script src="../js/main.js"></script>
</body>
</html> 